<template>
  <Col :span="columnProps.span?columnProps.span:'8'" v-if="columnProps.type=='Input'">
     <FormItem :label="columnProps.title" :prop="columnProps.key" :label-for="columnProps.key">
      <sort name="tip"><div class="tip">{{columnProps.tip}}</div></sort>
       <slot>
        <Input v-model="vmVal" 
        :type="columnProps.formatType?columnProps.formatType:'text'" 
        :password="columnProps.formatType=='password'?true:(columnProps.props?columnProps.props.password:false)"
        :placeholder="(columnProps.props && columnProps.props.placeholder)?columnProps.props.placeholder:'请输入'+columnProps.title" 
        :size="columnProps.props?columnProps.props.size:''"
        :clearable="columnProps.props?columnProps.props.clearable:true"
        :border="columnProps.props?columnProps.props.border:true"
        :disabled="columnProps.props?columnProps.props.disabled:false"
        :readonly="columnProps.props?columnProps.props.readonly:false"
        :maxlength="columnProps.props?columnProps.props.maxlength:''"
        :show-word-limit="columnProps.props?columnProps.props.show-word-limit:false"
        :icon="columnProps.props?columnProps.props.icon:''"
        :prefix="columnProps.props?columnProps.props.prefix:''"
        :suffix="columnProps.props?columnProps.props.suffix:''"
        :rows="columnProps.props?columnProps.props.rows:2"
        :autosize="columnProps.props?columnProps.props.autosize:false"
        :number="columnProps.props?columnProps.props.number:false"
        :autofocus="columnProps.props?columnProps.props.autofocus:false"
        :autocomplete="columnProps.props?columnProps.props.autocomplete:'off'"
        :spellcheck="columnProps.props?columnProps.props.spellcheck:false"
        :wrap="columnProps.props?columnProps.props.wrap:'soft'"
        :lement-id="columnProps.key" />
      </slot>
      <sort name="helper"><div class="helper">{{columnProps.helper}}</div></sort>
     </FormItem>
  </Col>

  <Col :span="columnProps.span?columnProps.span:'8'" v-if="columnProps.type=='Select' && columnProps.dict">
     <FormItem :label="columnProps.title" :prop="columnProps.key" :label-for="columnProps.key">
       <sort name="tip"><div class="tip">{{columnProps.tip}}</div></sort>
       <Select v-model="vmVal"
        :multiple="columnProps.formItem?columnProps.formItem.props.multiple:false"
        :label-in-value="true"
        :disabled="columnProps.props?columnProps.props.disabled:false"
        :lement-id="columnProps.key">
         <Option v-for="item in columnProps.dict.data"  :value="item.value" :key="item.value">{{ item.label }}</Option>
       </Select>
       <sort name="helper"><div class="helper">{{columnProps.helper}}</div></sort>
     </FormItem>
  </Col>

  <Col :span="columnProps.span?columnProps.span:'8'" v-if="columnProps.type=='TreeSelect' && columnProps.dict">
     <FormItem :label="columnProps.title" :prop="columnProps.key" :label-for="columnProps.key">
       <sort name="tip"><div class="tip">{{columnProps.tip}}</div></sort>
        <TreeSelect v-model="vmVal" @on-change="onChangeFn" :data="columnProps.dict.data" :lement-id="columnProps.key" />
        <sort name="helper"><div class="helper">{{columnProps.helper}}</div></sort>
     </FormItem>
  </Col>

  <Col :span="columnProps.span?columnProps.span:'8'" v-if="columnProps.type=='Upload'">
     <FormItem :label="columnProps.title" :prop="columnProps.key" :label-for="columnProps.key">
       <sort name="tip"><div class="tip">{{columnProps.tip}}</div></sort>
       <diy-upload :modelVal="vmVal" :formatType="columnProps.formatType" :columnKey="columnProps.key" @setColumnKeyVal="setUploadVal"></diy-upload>
       <sort name="helper"><div class="helper">{{columnProps.helper}}</div></sort>
     </FormItem>
  </Col>

  <Col :span="columnProps.span?columnProps.span:'8'" v-if="columnProps.type=='Cascader' && columnProps.dict">
     <FormItem  :label="columnProps.title" :prop="columnProps.key" :label-for="columnProps.key">
      <sort name="tip"><div class="tip">{{columnProps.tip}}</div></sort>
      <Cascader 
      :data="columnProps.dict.data" 
      v-model="vmVal" 
      :label-in-value="columnProps.props?columnProps.props.labelInValue:false"
      @on-change="onChangeFn" 
      :lement-id="columnProps.key"  />
      <sort name="helper"><div class="helper">{{columnProps.helper}}</div></sort>
     </FormItem>
  </Col>

  <Col :span="columnProps.span?columnProps.span:'8'" v-if="columnProps.type=='Radio' && columnProps.dict">
     <FormItem  :label="columnProps.title" :prop="columnProps.key" :label-for="columnProps.key">
       <sort name="tip"><div class="tip">{{columnProps.tip}}</div></sort>
        <sort>
         <RadioGroup v-model="vmVal" :lement-id="columnProps.key">
          <Radio :label="item.value" v-for="(item,index) in columnProps.dict.data" :key="index">
            {{item.label}}
          </Radio>
         </RadioGroup>
        </sort>
        <sort name="helper"><div class="helper">{{columnProps.helper}}</div></sort>
     </FormItem>
  </Col>


  <Col :span="columnProps.span?columnProps.span:'8'" v-if="columnProps.type=='Checkbox' && columnProps.dict">
     <FormItem  :label="columnProps.title" :prop="columnProps.key" :label-for="columnProps.key">
       <sort name="tip"><div class="tip">{{columnProps.tip}}</div></sort>
        <sort>
         <CheckboxGroup v-model="vmVal" :lement-id="columnProps.key">
          <Checkbox :label="item.value" v-for="(item,index) in columnProps.dict.data" :key="index">
            {{item.label}}
          </Checkbox>
         </CheckboxGroup>
        </sort>
        <sort name="helper"><div class="helper">{{columnProps.helper}}</div></sort>
     </FormItem>
  </Col>

  
  <Col :span="columnProps.span?columnProps.span:'8'" v-if="columnProps.type=='Switch'">
     <FormItem  :label="columnProps.title" :prop="columnProps.key" :label-for="columnProps.key">
        <sort name="tip"><div class="tip">{{columnProps.tip}}</div></sort>
        <Switch v-model="vmVal"  :lement-id="columnProps.key" />
        <sort name="helper"><div class="helper">{{columnProps.helper}}</div></sort>
     </FormItem>
  </Col>

  <Col :span="columnProps.span?columnProps.span:'8'" v-if="columnProps.type=='DatePicker'">
     <FormItem  :label="columnProps.title" :prop="columnProps.key" :label-for="columnProps.key">
        <sort name="tip"><div class="tip">{{columnProps.tip}}</div></sort>
        <DatePicker 
        :model-value="vmVal"
        :placeholder="'请选择'+columnProps.title" 
        :type="columnProps.props?columnProps.props.type:'date'"
        :format="columnProps.props?columnProps.props.format:''"
        :placement="columnProps.props?columnProps.props.placement:''"
        :options="columnProps.props?columnProps.props.options:{}"
        :split-panels="columnProps.props?columnProps.props.splitPanels:false"
        :multiple="columnProps.props?columnProps.props.multiple:false"
        :show-week-numbers="columnProps.props?columnProps.props.showWeekNumbers:false"
        :start-date="columnProps.props?columnProps.props.startDate:''"
        :confirm="columnProps.props?columnProps.props.confirm:false"
        :open="columnProps.props?columnProps.props.open:''"
        :size="columnProps.props?columnProps.props.size:''"
        :disabled="columnProps.props?columnProps.props.disabled:false"
        :clearable="columnProps.props?columnProps.props.clearable:true"
        :readonly="columnProps.props?columnProps.props.readonly:false"
        :editable="columnProps.props?columnProps.props.editable:true"
        :transfer="columnProps.props?columnProps.props.transfer:false"
        :time-picker-options="columnProps.props?columnProps.props.timePickerOptions:{}"
        :separator="columnProps.props?columnProps.props.separator:''"
        @on-change="onChangeFn"
        :lement-id="columnProps.key" />
        <sort name="helper"><div class="helper">{{columnProps.helper}}</div></sort>
     </FormItem>
  </Col>

  <Col :span="columnProps.span?columnProps.span:'8'" v-if="columnProps.type=='InputNumber'">
     <FormItem  :label="columnProps.title" :prop="columnProps.key" :label-for="columnProps.key">
        <sort name="tip"><div class="tip">{{columnProps.tip}}</div></sort>
        <sort><InputNumber v-model="vmVal"  :placeholder="columnProps.props?columnProps.props.placeholder:'请输入'+columnProps.title" 
         :max="columnProps.props?columnProps.props.max:'Infinity'"
         :min="columnProps.props?columnProps.props.min:'-Infinity'" 
         :controls-outside="columnProps.props?columnProps.props.controlsOutside:false"
         :step="columnProps.props?columnProps.props.step:'1'"
         :disabled="columnProps.props?columnProps.props.disabled:false"
         :readonly="columnProps.props?columnProps.props.readonly:false"
         :editable="columnProps.props?columnProps.props.readonly:true"
         :lement-id="columnProps.key"
         style="width:100%"
         /></sort>
        <sort name="helper"><div class="helper">{{columnProps.helper}}</div></sort>
     </FormItem>
  </Col>

  <Col :span="columnProps.span?columnProps.span:'8'" v-if="columnProps.type=='IconSelect'">
     <FormItem  :label="columnProps.title" :prop="columnProps.key" :label-for="columnProps.key">
        <sort name="tip"><div class="tip">{{columnProps.tip}}</div></sort>
        <sort>
          <i-icon-select v-model="vmVal"
         :placeholder="columnProps.props?columnProps.props.placeholder:'请输入'+columnProps.title" 
         :icon-list="columnProps.props?columnProps.props.iconList:'icon-list'"
         :clearable="columnProps.props?columnProps.props.clearable:false" 
         :icon-name="columnProps.props?columnProps.props.iconName:false"
         :show-title="columnProps.props?columnProps.props.showTitle:false"
         :disabled="columnProps.props?columnProps.props.disabled:false"
         :placement="columnProps.props?columnProps.props.placement:'bottom-start'"
         :search="columnProps.props?columnProps.props.search:true"
         :search-placeholder="columnProps.props?columnProps.props.searchPlaceholder:'搜索...'"
         :transfer="columnProps.props?columnProps.props.transfer:false"
         :transfer-class-name="columnProps.props?columnProps.props.transferClassName:''"
         :lement-id="columnProps.key"
         style="width:100%"
         /></sort>
        <sort name="helper"><div class="helper">{{columnProps.helper}}</div></sort>
     </FormItem>
  </Col>

  
  
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import util from '@/libs/util';
  import diyUpload from './diy-upload.vue';
  import { getAction } from '@api/netTool';


  export default defineComponent({
    name:'auto-create-form',
    components: { diyUpload },
    props:{
      column:{
        type: Object,
        default: () => ({})
      },
      value:{
        type:[String,Number,Array,Object],
        default:""
      }
    },
    data () {
      return {
         columnProps:{},
         myForm:{ },
         selectData:[],
         myValue:this.value
      }
    },
    emits: ['updateRules','change'],
    computed:{
      vmVal:{
        get(){
          return this.value
        },
        set(nVal){
          this.$emit('change',{key:this.column.key,value:nVal});
        }
      }
    },
    watch:{
      column:{
        immediate:true,
        handler(nVal){
          console.log(nVal)
          let rules=[];
          this.myForm[nVal['key']]="";
          if(nVal['dict'] && nVal['dict']['value']){ this.myForm[nVal['key']]=nVal['dict']['value']; this.vmVal= nVal['dict']['value']; }
          if(nVal.required){ rules.push({required: true, message: '请输入'+nVal.title, trigger: 'change'}); }
          if(nVal.diyRule){  rules.push(nVal.diyRule); }
          if(rules.length > 0){this.$emit('updateRules',{key:nVal.key,value:rules});}
          this.columnProps = nVal;
          if(nVal.dict){ 
            this.drawingSelect(nVal);
            this.drawingTreeSelect(nVal);
            this.drawingCascader(nVal);
          }
        }
      }
    },
    methods: {
      drawingSelect(nVal){
        let column:any=nVal;
        if(!column.dict.data && column.type=='Select' && column.dict.url){
           getAction(column.dict.url,column.dict.params).then(res => { 
              column.dict.data = util.convertCascaderTree(res,{label:column.dict.label,value:column.dict.code})
              this.columnProps = column;
           })
        }
      },
      drawingTreeSelect(nVal){
        let column:any=nVal;
        if(!column.dict.data && column.type=='TreeSelect' && column.dict.url){
           getAction(column.dict.url,column.dict.params).then(res => { 
              column.dict.data = util.convertTree(res,{title:column.dict.title,value:column.dict.code,children:column.dict.children})
              this.columnProps = column;
           })
        }
      },
      drawingCascader(nVal){
        let column:any=nVal;
        if(!column.dict.data && column.type=='Cascader' && column.dict.url){
           getAction(column.dict.url,column.dict.params).then(res => { 
              column.dict.data = util.convertCascaderTree(res,{label:column.dict.label,value:column.dict.code,children:column.dict.children})
              this.columnProps = column;
           })
        }
      },
      onChangeFn(value,selectedData){
        if(this.column.props && this.column.props.labelInValue){  value = selectedData; }
       // const key = this.column.key;
        this.$emit('change',{key:this.column.key,value:value});
       // this.vmVal = value;
      },
      setUploadVal(data){
        this.vmVal = data.value.join(',');
      } 
    }
  })
</script>

<style scoped lang="less">
  .i-uploader__wrapper{display:flex;  flex-wrap:wrap;
    .i-uploader__preview{width:80px; height:80px; position: relative; margin-right: 10px;  margin-bottom: 10px;
      .i-uploader__preview-delete{width:14px; height:14px; text-align: center; line-height: 11px; position: absolute; right:0px; top:0px; border-radius: 0 0 0 12px; background-color:rgb(0,0,0,0.7);}
    }

    .i-uploader__upload{ width:80px; height:80px; cursor: pointer; position: relative; display:flex; flex-direction:column; box-sizing:border-box; align-items:center; justify-content:center; margin-right: 10px;  margin-bottom: 10px; background-color: #F7F8FA;
      .uploadIcon{ color:#CCCCCC; margin-top: 15px;}
    }
  }
  .helper{ color: #999;line-height: 18px;margin-top: 5px;}
  .ivu-date-picker{ width:100%}
</style>